<template>
  <div>
    <m-table :data="proList" :selection="true" ref="product">
      <template v-slot:header="{ row }">
        <div style="width:100%">
          <span style="margin-right:50px">商品ID：{{ row.productSn }}</span>
          <span style="margin-right:50px">创建时间：{{ row.createTime }}</span>
        </div>
      </template>
      <m-table-column label="商品名" width="250">
        <template v-slot="{ row }">
          <div class="shopName">
            <img :src="row.pic" alt style="width:60px;height:60px" />
            <div class="shopName__name">
              <GoodNameEdit :good-name="row.integralGoodName" @change="updateGoodName" @click.native="getItem(row)" />
            </div>
          </div>
        </template>
      </m-table-column>
      <m-table-column label="积分">
        <template v-slot="{ row }">
          <div class="middleCenter">
            <IntegralCode :good-price="Number(row.integralPrice)" @change="updateIntegralPrice"
              @click.native="getItem(row)" />
          </div>
        </template>
      </m-table-column>
      <m-table-column label="库存">
        <template v-slot="{ row }">
          <div class="middleCenter">
            <IntegralStock :good-stock="row.inventory" @change="updateGoodStock" @click.native="getItem(row)" />
            <el-popover placement="top-start" trigger="hover">
              <div v-if="row.inventory === 0">商品已售罄</div>
              <span slot="reference">
                <i class="el-icon-warning" v-if="row.inventory === 0" style="color:#FF0000;margin-left:5px"></i>
              </span>
            </el-popover>
          </div>
        </template>
      </m-table-column>
      <m-table-column label="状态">
        <template v-slot="{ row }">
          <div class="middleCenter">
            <div class="upDown">
              <span class="upDown--goodUp" :style="{
                  'background-color': row.status === 1 ? '#5CB95C' : '#626C72',
                }">{{ row.status === 1 ? "已上架" : "已下架" }}</span>|
              <span class="upDown--goodDown" @click="changeStatus(row)">{{
                row.status === 1 ? "下架" : "上架"
              }}</span>
            </div>
          </div>
        </template>
      </m-table-column>
      <m-table-column width="120" label="操作">
        <template v-slot="{ row }">
          <div class="middleCenter">
            <set-drop setName="编辑" :dropdownList="dropdownShopList" @setClick="show(row)"
              @command="handleCommand($event, row)" />
          </div>
        </template>
      </m-table-column>
    </m-table>
  </div>
</template>

<script lang="ts">
import {
  Vue,
  Component
} from "vue-property-decorator";
import {
  getIntegralGoods,
  upDownIntegralGoods,
  editIntegralGoodsDetail,
  delIntegralGoods,
} from "@/api/integral/integral";
import GoodNameEdit from "@/components/GoodNameEdit.vue"; // 编辑商品名称
import IntegralCode from "@/components/IntegralCode.vue"; // 编辑商品积分价格
import IntegralStock from "@/components/IntegralStock.vue"; // 编辑商品库存
import {
  Getter
} from "vuex-class";
import SetDrop from "@/views/customer/common/SetDrop.vue";

  @Component({
    components: {
      GoodNameEdit,
      IntegralCode,
      IntegralStock,
      SetDrop,
    },
  })
export default class ProductList extends Vue {


  get searchObj() {
    return this.$parent.searchObj;
  }

    proList = [];

    /** 选中商品 */
    currentGood: any = {};


    /** 配送设置内容 */
    rections = {
      autoShippingState: "" /** 设置新增提货点是否自动设置送货上门,0false=禁用,1true=启用 */ ,
      goodPointIdsPercentage: "",
    };

    /**
     * 下拉商品列表
     */
    dropdownShopList = [{
      text: "删除",
      command: "1",
      show: true,
      disabled: false,
    }, ];

    mounted() {
      this.getList();
    }

    async getList() {
      const param = {
        current: this.searchObj.pageNum,
        size: this.searchObj.pageSize,
        status: this.searchObj.status,
        integralGoodName: this.searchObj.integralGoodName,
        productSn: this.searchObj.productSn,
      };
      const res = await getIntegralGoods(param);
      this.proList = res.data.list;
      this.$emit("getTotal", res.data.total);
    }

    /**
     * 查看详情
     */
    show(row) {
      this.$router.push({
        name: "IssueGoodAdd",
        params: {
          id: row.id
        }
      });
    }

    getItem(row) {
      this.currentGood = row;
    }

    /**
     * 更新商品名称
     */
    async updateGoodName(newName: string) {
      const param = {
        ...this.currentGood,
        integralGoodName: newName,
      };
      await this.updateGoodInfo(param);
      this.currentGood.integralGoodName = newName;
    }

    /**
     * 更新积分价格
     */
    async updateIntegralPrice(newPrice: number) {
      const param = {
        ...this.currentGood,
        integralPrice: newPrice,
      };
      await this.updateGoodInfo(param);
      this.currentGood.integralPrice = newPrice;
    }

    /**
     * 更新积分库存
     */
    async updateGoodStock(newStock: string) {
      const param = {
        ...this.currentGood,
        inventory: newStock,
      };
      await this.updateGoodInfo(param);
      this.currentGood.inventory = newStock;
    }

    /**
     * 更新商品信息
     */
    async updateGoodInfo(param) {
      try {
        const {
          code
        } = await editIntegralGoodsDetail(param);
        if (code === 200) {
          this.$message.success("修改成功");
          return Promise.resolve(true);
        }
      } catch (error) {
        console.log(error);
      }
      return Promise.reject(false);
    }

    /**
     * 上下架商品
     */
    changeStatus(item) {
      const id = [];
      id.push(item.id);
      upDownIntegralGoods(item.status === 1 ? 0 : 1, id).then(res => {
        if (res.code === 200) {
          this.$message.success(`商品已${item.status === 0 ? "上架" : "下架"}`);
          this.getList();
        }
      });
    }

    /**
     * 点击的下拉项
     */
    handleCommand(val, row) {
      this.$confirm(`确定删除选中商品？删除后无法恢复`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delIntegralGoods(row.id, {}).then(res => {
          if (res.code === 200) {
            this.getList();
            this.$message.success("删除成功");
          }
        });
      });
    }
}
</script>

<style lang="scss" scoped>
  .shopName {
    display: flex;

    &__name {
      margin-left: 20px;
      flex-wrap: wrap;
      padding-top: 10px;
    }
  }

  .middleCenter {
    @include flex(center, center);
  }

  .upDown {
    display: flex;
    align-items: center;
    justify-content: center;

    &--goodUp {
      display: flex;
      width: 40px;
      height: 20px;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
      color: white;
      margin-right: 10px;
    }

    &--goodDown {
      margin-left: 10px;
      color: #2d8cf0;
      cursor: pointer;
    }
  }

  @include b(setClassify) {
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;

    @include e(del) {
      width: 80px;
      height: 30px;
      // border: 1px solid #e0e0e0;
      display: flex;
      justify-content: center;
      align-items: center;
      // border-top-left-radius: 5px;
      // border-bottom-left-radius: 5px;
      cursor: pointer;
    }

    @include e(drop) {
      width: 40px;
      height: 30px;
      border: 1px solid #e0e0e0;
      display: flex;
      justify-content: center;
      align-items: center;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
      cursor: pointer;
    }
  }
</style>